<template>
	<view class="knowledge">
		<view class="screenCondition dFlex jAround_aCenter">
			<view :class="['conditionOne',tid == '1' ? 'actScreen' : '']" @click="tid = '1';initList(1)">
				<text>质量培训</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view>
			<view :class="['conditionOne',tid == '2' ? 'actScreen' : '']" @click="tid = '2';initList(1)">
				<text>知识分享</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view> 
		</view>
		<view class="list">
			<view class="shareOne" v-for="(item,index) in list" :key='index' @click="lookDetail(item.id)">
				<!-- <view class="vidContent">
					<video src="" controls style="width: 100%;"></video>
				</view> -->
				<view class="imgContent imgPublic">
					<image :src="item.main_img" mode="widthFix"></image>
				</view>
				<view class="desc">
					<view class="actTit dFlex jBetween_aCenter">
						<view class="tit">{{item.title}}</view>
						<view class="tools dFlex jEnd_aCenter">
							<view class="toolOne dFlex jCenter_aCenter">
								<view class="toolIcon imgPublic">
									<image src="../static/images/look.png" mode="widthFix"></image>
								</view>
								<text>{{item.play_num}}</text>
							</view>
							<view class="toolOne dFlex jCenter_aCenter" @click.stop='changeCollect(item)'>
								<view class="toolIcon imgPublic">
									<image v-if='item.is_collect == "0"' src="../static/images/collect.png" mode="widthFix"></image>
									<image v-if='item.is_collect == "1"' src="../static/images/collect2.png" mode="widthFix"></image>
								</view>
								<text>{{item.like_num}}</text>
							</view>
						</view>
					</view>
					<view class="author">作者：{{item.author?item.author:'-'}} {{item.create_time?item.create_time:'未知'}}</view>
					<view class="article">{{item.intro?item.intro:'暂无相关介绍'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShareList,collectGoods
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				tid:'1', //1质量培训  2知识分享
				list:[],
				page:1,
				size:10,
				load:false,
			};
		},
		onLoad(){
			this.initList();
		},
		onShareAppMessage() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		onShareTimeline() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		onReachBottom() {
			if(this.load){
				this.load = false;
				this.page ++ ;
				this.initList();
			}
		},
		methods:{
			// 查看详情
			lookDetail(id){
				uni.navigateTo({
					url:'/knowledge/shareDetail?id='+id+"&tid="+this.tid,
				})
			},
			// 列表
			async initList(page){
				this.page = page ? page : this.page;
				let res = await getShareList({
					tid:this.tid,
					page:this.page,
					size:this.size,
				});
				console.log(res);
				if(res){
					this.list = this.page == '1' ? res : this.list.concat(res);
					this.load = res.length >= 10 ? true : false;
				}
			},
			// 修改收藏
			async changeCollect(line){
				let res = await collectGoods({
					id:line.id,
					type:'2'
				})
				console.log(res);
				if(res){
					line.like_num = res === true ? 0 : res;
					line.is_collect = !line.is_collect;
				}
			}
		}
	}
</script>

<style lang="scss">
	.knowledge{
		width:100%;
		padding:12px;
		box-sizing: border-box;
		.list{
			width:100%;
			.shareOne{
				width:100%;
				margin-bottom: 10px;
				.desc{
					width:100%;
					padding: 12px;
					box-sizing: border-box;
					border-bottom-left-radius: 5px;
					border-bottom-right-radius: 5px;
					background:white;
					.author{
						font-size: 12px;
						color:#808080;
						margin: 6px 0;
					}
					.article{
						width:100%;
						font-size: 12px;
						color:#808080;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
					.actTit{
						width:100%;
						.tit{
							font-size: 15px;
							font-weight: bold;
						}
						.tools{
							width: max-content;
							font-size: 10px;
							.toolOne{
								width: max-content;
								margin-left: 8px;
							}
							.toolIcon{
								width: 15px;
								height: 15px;
								margin-right: 5px;
							}
						}
					}
				}
			}
		}
		.screenCondition{
			padding-top:0;
		}
	}
</style>
